<template>
  <!--  组件的结构-->
    <div class="demo">
        <h1>{{ msg }}</h1>
        <h2 @click="showName">学生姓名：{{ name }}</h2>
        <h2>学生年龄：{{ age + 1 }}</h2>
    </div>
</template>

<script>
import {mixin} from '../mixin'
// 组件的交互代码
export default {
    name: "Student",
    data() { // 组件一定要使用普通函数的定义
        return {
            msg: '我是庄小焱',
            name: "xiaoyan",
            age: 20,
        }
    },
    // 调用mixin
    mixins: [mixin]
}
</script>

<style scoped>
/*组件的样式*/
.demo {
    background-color: #C03639;
}
</style>